<template>
  <div class="category">
    <nav-bar :isUpper="false">
      <span slot="text">我的</span>
    </nav-bar>
    <section class="container">
      <header @click="login">
        <!-- <img :src="imageUrl + userInfo.avatar" v-if="userInfo && userInfo.id" /> -->
        <!-- 测试图片 -->
        <img src="@/assets/images/8.jpg" />
        <div class="info">
          <div v-if="userInfo && userInfo.id">
            <p>{{ userInfo.nickname }}</p>
            <p class="phone">{{ userInfo.phone }}</p>
          </div>
          <p v-else>登录/注册</p>
        </div>
      </header>
      <ul class="list">
        <li @click="canal('/user/collect')">
          <div class="left">
            <i class="iconfont icon-shoucang"></i>
            <span>店铺收藏</span>
          </div>
          <i class="iconfont icon-zuojiantou right"></i>
        </li>
        <li @click="canal('/order')">
          <div class="left">
            <i class="iconfont icon-dingdan"></i>
            <span>我的订单</span>
          </div>
          <i class="iconfont icon-zuojiantou right"></i>
        </li>
        <li>
          <div class="left">
            <i class="iconfont icon-keyongyue"></i>
            <span>我的余额</span>
          </div>
          <i class="iconfont icon-zuojiantou right"></i>
        </li>
        <li @click="canal('/user/address')">
          <div class="left">
            <i class="iconfont icon-dizhi"></i>
            <span>收货地址</span>
          </div>
          <i class="iconfont icon-zuojiantou right"></i>
        </li>
        <li>
          <div class="left">
            <i class="iconfont icon-zuji"></i>
            <span>我的足迹</span>
          </div>
          <i class="iconfont icon-zuojiantou right"></i>
        </li>
        <li @click="logout">
          <div class="left">
            <i class="iconfont icon-exit"></i>
            <span>退出登录</span>
          </div>
          <i class="iconfont icon-zuojiantou right"></i>
        </li>
      </ul>
      <div class="server">
        <li>
          <div class="left">
            <i class="iconfont icon-help"></i>
            <span>帮助中心</span>
          </div>
          <i class="iconfont icon-zuojiantou right"></i>
        </li>
        <li>
          <div class="left">
            <i class="iconfont icon-kefu"></i>
            <span>联系客服</span>
          </div>
          <i class="iconfont icon-zuojiantou right"></i>
        </li>
      </div>
    </section>
    <main-tab-bar />
    <router-view />
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { imageUrl } from '@/config/env';
import { logout } from '@/network/getData';

export default {
  data() {
    return {
      imageUrl
    };
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    ...mapMutations(['SAVE_USER_INFO']),
    login() {
      if (!(this.userInfo && this.userInfo.id)) {
        this.$router.push('/login');
      } else {
        this.$router.push('/user/info');
      }
    },
    // 跳转
    canal(path) {
      if (!(this.userInfo && this.userInfo.id)) {
        this.$message({ message: '请登录' });
        return false;
      }
      this.$router.push(path);
    },
    logout() {
      if (this.userInfo && this.userInfo.id) {
        logout().then(res => {
          if (res.code === 200) {
            this.SAVE_USER_INFO({});
          }
        });
      }
    }
  },
  watch: {}
};
</script>

<style lang="less" scoped>
.container {
  padding-top: 44px;
  .phone {
    font-size: var(--font-size);
    margin-top: 3px;
  }
  .list,
  .server {
    background-color: #fff;
  }
  li {
    width: 100%;
    height: 38px;
    line-height: 36px;
    padding: 0 10px;
    border-bottom: 1px solid #eee;
    div > i {
      margin-right: 8px;
      font-size: var(--font-szie);
    }
    .right {
      transform: rotate(180deg);
    }
  }
  header {
    display: flex;
    align-items: center;
    padding: 10px;
    color: #fff;
    background-color: var(--color-base);
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      // border: 2px solid #fff;
      margin-right: 10px;
    }
  }
  .server {
    margin-top: 15px;
    li:first-of-type {
      border-top: 1px solid #eee;
    }
  }
}
</style>
